<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href='/plug-in/pear/css/pear.css' media="all">
		<link rel="stylesheet" type="text/css" href="drag-table.css" />
		<link rel="stylesheet" type="text/css" href="/css/base.css" />

		<script src="../../plug-in/jquery/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plug-in/jquery/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plug-in/layui-v2.5.6/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="page-content">

			<div class="set-options">
				<div class="options-left">
					<div class="top-title">
						<fieldset class="layui-elem-field layui-field-title">
							<legend>表单选项</legend>
						</fieldset>
						<fieldset class="layui-elem-field site-demo-button towexin-base" style="margin-top: 30px;">
							<legend>常用</legend>
							<div class="options-content">
								<div class="layui-form-item towexin-table-option" towexin-check="name">
									<label class="layui-form-label">姓名</label>
									<div class="layui-input-inline">
										<input type="text" name="username" lay-verify="name" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item towexin-table-option" towexin-check="sex">
									<label class="layui-form-label">性别</label>
									<div class="layui-input-block">
										<input type="radio" name="sex" value="0" title="男" disabled>
										<input type="radio" name="sex" value="1" title="女">
									</div>
								</div>
								<div class="layui-form-item towexin-table-option" towexin-check="phone">
									<label class="layui-form-label">电话</label>
									<div class="layui-input-inline">
										<input type="number" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item towexin-table-option" towexin-check="email">
									<label class="layui-form-label">邮箱</label>
									<div class="layui-input-inline">
										<input type="email" name="email" lay-verify="email" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item towexin-table-option" towexin-check="date">
									<label class="layui-form-label">日期</label>
									<div class="layui-input-inline">
										<input type="text" name="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item towexin-table-option" towexin-check="idcard">
									<label class="layui-form-label">身份证</label>
									<div class="layui-input-inline">
										<input type="text" name="idcard" lay-verify="identity" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
						</fieldset>
						<fieldset class="layui-elem-field site-demo-button towexin-elem" style="margin-top: 30px;">
							<legend>表单标签</legend>
							<div class="options-content-form">
								<form class="layui-form" action="" lay-filter="example">
									<div class="layui-form-item towexin-table-option-show" towexin-check="input">
										<label class="layui-form-label">输入框</label>
										<div class="layui-input-inline">
											<input type="text" name="demo" lay-verify="name" autocomplete="off" class="layui-input" disabled>
										</div>
									</div>
									
									<div class="layui-form-item towexin-table-option-show" towexin-check="date">
										<label class="layui-form-label">日期选择</label>
										<div class="layui-input-inline">
											<input id="date" type="text" name="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" disabled>
										</div>
									</div>
									<div class="layui-form-item towexin-table-option-show">
									    <label class="layui-form-label">单选框</label>
									    <div class="layui-input-block">
									      <input type="radio" name="demo3" value="0" title="选项一" disabled>
									      <input type="radio" name="demo3" value="1" title="选项二" disabled>
									    </div>
									  </div>
									<div class="layui-form-item towexin-table-option-show" towexin-check="checkbox">
										<label class="layui-form-label">复选框</label>
										<div class="layui-input-block">
											<input type="checkbox" name="demo1" title="选项一" value="0" disabled>
											<input type="checkbox" name="demo1" title="选项二" value="1" disabled>
											<!-- <input type="checkbox" name="demo1" title="选项三" value="2" disabled> -->
										</div>
									</div>
									<div class="layui-form-item towexin-table-option-show" towexin-check="checkbox">
										<label class="layui-form-label">原始复选框</label>
										<div class="layui-input-block">
											<input type="checkbox" name="demo2" title="选项一" value="0" lay-skin="primary" disabled>
											<input type="checkbox" name="demo2" title="选项二" value="1" lay-skin="primary" disabled>
											<!-- <input type="checkbox" name="demo2" title="选项三" value="2" lay-skin="primary" disabled> -->
										</div>
									</div>
								</form>
								
								
							</div>
						</fieldset>
					</div>
				</div>
				<div class="options-center">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>表单样式效果</legend>
					</fieldset>
					<form class="layui-form" id="diy-table" action="" lay-filter="drag-table">

					</form>
				</div>
				<div class="options-right">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>表单属性设置</legend>
					</fieldset>
					<form class="layui-form layui-hide" id="set-attributes" action="" lay-filter="attributes-set" style="padding-right: 30px;">
						<fieldset class="layui-elem-field site-demo-button">
							<legend>BASE</legend>
							<div class="options-content">
								<div class="layui-form-item">
									<label class="layui-form-label">标题</label>
									<div class="layui-input-block">
										<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">宽度</label>
									<div class="layui-input-block">
										<select name="width">
											<option value=""></option>
											<option value="layui-input-block">自适应</option>
											<option value="layui-input-inline">固定</option>
										</select>
									</div>
								</div>
							</div>
						</fieldset>

						<fieldset class="layui-elem-field site-demo-button">
							<legend>ATTRIBUTES</legend>
							<div class="options-content">
								<div class="layui-form-item">
									<label class="layui-form-label">字段(name)</label>
									<div class="layui-input-block">
										<input type="text" name="field" placeholder="请输入后台接收的字段" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item set-type">
									<label class="layui-form-label">类型(type)</label>
									<div class="layui-input-block">
										<select name="type">
											<option value=""></option>
											<option value="text">文字(text)</option>
											<option value="password">密码(password)</option>
											<option value="email">邮箱(email)</option>
											<option value="number">数字(number)</option>
											<!-- <option value="radio">单选框(radio)</option> -->
										</select>
									</div>
								</div>
								<div class="layui-form-item set-disinput">
									<label class="layui-form-label">禁止选择</label>
									<div class="layui-input-block">
										<input style="display: none;" type="text" name="switchValueInput" autocomplete="off" class="layui-input">
										<input type="checkbox" name="closeInput" lay-skin="switch" lay-filter="set-input-switch" lay-text="ON|OFF">
									</div>
								</div>

								<div class="layui-form-item set-title-option">
									<label class="layui-form-label">设置选项(option)</label>
									<div class="layui-input-block">
										<div class="layui-unselect layui-form-select">
											<div class="layui-select-title"><input type="text" readonly class="layui-input layui-unselect" name="set-option"></div>
											<div class="layui-input option-in">
												<i class="layui-edge" style="pointer-events: none;"></i>
												<div class="input-option">

												</div>
												<!-- <a href="javascript:;"><span towexin-value="12">长者</span><i class="layui-icon">ဆ</i></a> -->

											</div>
											<dl class="layui-anim layui-anim-upbit" style="padding: 10px;">
												<div class="layui-form-item">
													<label class="layui-form-label">选项名称(title)</label>
													<div class="layui-input-block" style="margin-left: 0;">
														<input style="height: 35px;" type="text" name="optionTitle" autocomplete="off" class="layui-input">
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">选项值(value)</label>
													<div class="layui-input-block" style="margin-left: 0;">
														<input style="height: 35px;" type="text" name="optionValue" autocomplete="off" class="layui-input">
													</div>
												</div>

												<div class="layui-form-item">
													<label class="layui-form-label">禁止选择</label>
													<div class="layui-input-block">
														<input style="display: none;" type="text" name="switchValue" autocomplete="off" class="layui-input">
														<input type="checkbox" name="close" lay-skin="switch" lay-filter="set-option-switch" lay-text="ON|OFF">
													</div>
												</div>

												<div class="layui-input-block" style="margin-left: 0;">
													<div class="layui-btn">设置</div>
												</div>
											</dl>
										</div>
									</div>
								</div>
							</div>
						</fieldset>
						<div class="layui-form-item">
							<div class="layui-input-block" style="margin-left: 0;">
								<!-- <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
								<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button> -->
								<button id="set-submit" style="width: 100%;" type="submit" class="layui-btn" lay-submit="" lay-filter="set-submit">确定</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>


		<script src="drag-table.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
